<template>
  <view class="indexPage">
    <view class="top-bg"></view>
    <!-- 导航栏 -->
    <s-nav-bar title="消息通知" statusBar back></s-nav-bar>
    <view class="searchbox">
      <view class="bb">
        <view class="inputbox">
          <input class="inputs" placeholder="关键字" />
        </view>
        <view class="searchbtn">搜索</view>
      </view>
      <view class="navs">
        <view class="view" :class="nav == 1 ? 'haschack' : ''">全部</view>
        <view class="view">订单</view>
        <view class="view">机会</view>
      </view>
    </view>
    <scroll-view class="main-scroll" scroll-y @scrolltolower="reachBottom" refresher-enabled
      :refresher-triggered="refreshing" @refresherrefresh="handleRefresh">
      <view class="message-list">

        <view class="system-message" @click="gopage">
          <view class="message-icon">
            <image class="icon_mail" mode="widthFix"
              src="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/icon_mail.png" />
          </view>
          <view class="message-info">
            <view class="message-title">系统消息</view>
            <view class="message-info">收到一条今日任务</view>
          </view>
          <view class="message-time">10:16</view>
        </view>
        <view class="message-item active" @click="godetail">
          <view class="date-box" style="background-color: rgb(84, 87, 102); color: rgb(255, 255, 255);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">南京摄影<span class="tag">婚礼</span></span><span
                class="time">12:02</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.24</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">西安喜来登摄影<span class="tag">商务</span></span><span
                class="time">08/14</span></view>
            <view class="message-content">订单状态变更</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(84, 87, 102); color: rgb(255, 255, 255);">
            <view class="date">07.25</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">上海产品拍摄<span class="tag">电商</span></span><span
                class="time">09:30</span></view>
            <view class="message-content">新订单提醒</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.26</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">北京商业广告<span class="tag">商业</span></span><span
                class="time">14:20</span></view>
            <view class="message-content">订单已完成</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(84, 87, 102); color: rgb(255, 255, 255);">
            <view class="date">07.27</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">杭州婚纱摄影<span class="tag">婚礼</span></span><span
                class="time">16:45</span></view>
            <view class="message-content">客户反馈</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(255, 255, 255); color: rgb(84, 87, 102);">
            <view class="date">07.28</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">广州活动拍摄<span class="tag">活动</span></span><span
                class="time">10:15</span></view>
            <view class="message-content">订单审核通过</view>
          </view>
        </view>
        <view class="message-item">
          <view class="date-box" style="background-color: rgb(84, 87, 102); color: rgb(255, 255, 255);">
            <view class="date">07.29</view>
            <view class="year">2025</view>
          </view>
          <view class="message-content-box">
            <view class="message-header"><span class="title">深圳电商拍摄<span class="tag">电商</span></span><span
                class="time">11:30</span></view>
            <view class="message-content">付款提醒</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import sNavBar from '@/uni_modules/s-ui/components/s-nav-bar/s-nav-bar.vue'

export default {
  components: {
    sNavBar
  },
  data() {
    return {
      nav: 1,
      refreshing: false
    };
  },
  onLoad() {

  },
  onShow() {
  },
  methods: {
    godetail() {
      uni.navigateTo({
        url: "/pages/extra/statuslist/index"
      });
    },
    gopage() {
      uni.navigateTo({
        url: "/pages/extra/orderlist/list"
      });
    },
  },
};
</script>
<style lang="less" scoped>
.indexPage {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.main-scroll {
  flex-grow: 1;
  height: 0;
  box-sizing: border-box;
  padding-top: 20rpx;
}

.bb {
  overflow: hidden;
}

.searchbox {
  width: 100%;
  background: white;
  padding: 30upx;
  box-sizing: border-box;

  .searchbtn {
    float: right;
    width: 100upx;
    height: 70upx;
    background: var(--v-linear);
    color: white;
    text-align: center;
    line-height: 70upx;
    border-radius: 10upx;
  }

  .inputbox {
    width: 83%;
    float: left;
    border-radius: 15upx;
    margin: 0 auto;
    border: solid 1px rgb(191, 191, 191);
  }
}


.inputs {
  width: 90%;
  display: black;
  min-height: 70upx;
  font-size: 28upx;
  padding: 0 20upx;
  box-sizing: border-box;

}

.navs {
  border-bottom: solid 1px #eee;
  overflow: hidden;

  >.view {
    float: left;
    line-height: 80upx;
    width: 120upx;
    text-align: center;
  }
}

.haschack {
  position: relative;
  color: #5e91ef;
}

.haschack::after {
  content: "";
  position: absolute;
  width: 50rpx;
  height: 5upx;
  background: #5e91ef;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.system-message {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;

  .message-time {
    font-size: 12px;
    color: #999;
  }

  .icon_mail {
    width: 70%;
  }

  .message-icon {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    background: linear-gradient(135deg, #73d1f3, #5e91ef);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
  }

  .message-info {
    flex: 1;

    .message-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 4px;
    }

    .message-info {
      font-size: 12px;
      color: #666;
    }
  }
}

.message-list {
  .message-item {
    display: flex;
    padding: 30upx;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;

    .message-content-box {
      flex: 1;
      min-width: 0;

      .message-content {
        font-size: 13px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .message-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px;

        .title {
          font-size: 14px;
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          .tag {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 10px;
            background-color: #0000001a;
            margin-left: 6px;
            font-size: 10px;
          }
        }

        .time {
          font-size: 12px;
          color: #999;
          margin-left: 8px;
          flex-shrink: 0;
        }
      }
    }

    .date-box {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;

      .date {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 2px;
      }

      .year {
        font-size: 12px;
        opacity: .8;
      }
    }
  }
}
</style>